{% extends 'admin/manager.html' %}

{% block app_content %}
<div class="container mb-4"></div>
<h1 class="display-6" align="center">教师管理</h1>
<div class="container mb-4"></div>

<!-- 查询表单 -->
<form id="teacherSearchForm" class="form-inline mb-4">
    <input type="text" id="teacherSearchTerm" class="form-control mr-2" placeholder="输入教师姓名">
    <button type="button" class="btn btn-primary" onclick="searchTeacher()">查询</button>
</form>

<form action="/add_teacher" method="POST">
    <div class="form-row">
      <div class="col">
        <select type="text" name="DeptName" class="form-control custom-select" placeholder="学院名" required>
            {% if info %}
            {% for dept in info.depts %}
            <option>{{ dept }}</option>
            {% endfor %}
            {% else %}
            <option>无学院信息，请录入</option>
            {% endif %}
        </select>
      </div>
      <div class="col">
        <input type="number" name="TeacherNum" class="form-control" placeholder="工号" required>
      </div>
      <div class="col">
        <input type="text" name="TeacherName" class="form-control" placeholder="姓名" required>
      </div>
      <div class="col">
        <select type="text" name="TeacherSex" class="form-control custom-select" placeholder="性别" required>
            <option>男</option>
            <option>女</option>
        </select>
    </div>
    <div class="col">
        <input type="text" name="TeacherTitle" class="form-control" placeholder="职称">
      </div>
      <div class="col">
        <input type="datetime" name="TeacherInyear" class="form-control" placeholder="入职年份">
      </div>
      <div class="col">
      <button type="submit" class="btn btn-block btn-success mb-2">录入</button>
      </div>
    </div>
  </form>
  <hr>
  <div class="container mb-4"></div>
    <table class="table table-striped table-hover" id="teacherTable">
            <thead class="thead-dark">
        <tr>
            <th class="lead" style="width: 10%;">学院号</th>
            <th class="lead" style="width: 15%;">学院名</th>
            <th class="lead" style="width: 10%;">工号</th>
            <th class="lead" style="width: 15%;">姓名</th>
            <th class="lead" style="width: 10%;">性别</th>
            <th class="lead" style="width: 15%;">职称</th>
            <th class="lead" style="width: 15%;">入职年份</th>
            <th class="lead" style="width: 10%;">操作</th>
            <th class="lead">-</th>
        </tr>
            </thead>
            <tbody>
        {% if teachers %}
        {% for teacher in teachers %}
        <tr>
           <td class="lead">{{ teacher.dept.DeptNum }}</td>
           <td class="lead">{{ teacher.dept.DeptName }}</td>
           <td class="lead">{{ teacher.TeacherNum }}</td>
           <td><input type="text" value="{{ teacher.TeacherName }}" class="form-control" id="name-{{ teacher.TeacherNum }}"></td>
           <td>
               <select class="form-control" id="sex-{{ teacher.TeacherNum }}">
                   <option value="男" {% if teacher.TeacherSex == '男' %}selected{% endif %}>男</option>
                   <option value="女" {% if teacher.TeacherSex == '女' %}selected{% endif %}>女</option>
               </select>
           </td>
           <td><input type="text" value="{{ teacher.TeacherTitle }}" class="form-control" id="title-{{ teacher.TeacherNum }}"></td>
           <td><input type="text" value="{{ teacher.TeacherInyear }}" class="form-control" id="inyear-{{ teacher.TeacherNum }}"></td>
           <td><button class="btn btn-success" onclick="updateTeacher('{{ teacher.TeacherNum }}')">保存</button></td>
        <td class="lead">
               <a href="{{ url_for('delete_teacher', TeacherNum=teacher.TeacherNum) }}" class="btn btn-outline-danger btn-sm" role="button">删除</a>
           </td>
        </tr>
        {% endfor %}
        {% endif %}
    </tbody>
    </table>

<script>
function searchTeacher() {
    const searchTerm = document.getElementById('teacherSearchTerm').value;
    fetch('/search_teacher', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ search_term: searchTerm })
    })
    .then(response => response.json())
    .then(data => {
        const tableBody = document.querySelector('#teacherTable tbody');
        tableBody.innerHTML = '';
        data.forEach(teacher => {
            const row = `<tr>
                <td class="lead">${teacher.DeptNum}</td>
                <td class="lead">${teacher.DeptName}</td>
                <td class="lead">${teacher.TeacherNum}</td>
                <td class="lead">${teacher.TeacherName}</td>
                <td class="lead">${teacher.TeacherSex}</td>
                <td class="lead">${teacher.TeacherTitle}</td>
                <td class="lead">${teacher.TeacherInyear}年</td>
            </tr>`;
            tableBody.innerHTML += row;
        });
    })
    .catch(error => console.error('Error:', error));
}

function updateTeacher(teacherNum) {
    const name = document.getElementById(`name-${teacherNum}`).value;
    const sex = document.getElementById(`sex-${teacherNum}`).value;
    const title = document.getElementById(`title-${teacherNum}`).value;
    const inyear = document.getElementById(`inyear-${teacherNum}`).value;

    fetch(`/update_teacher/${teacherNum}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name, sex, title, inyear })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('更新成功');
        } else {
            alert('更新失败');
        }
    })
    .catch(error => console.error('Error:', error));
}
</script>
{% endblock %}